<!--
 * @Description:
 * @Author:
 * @Date: 2019-12-07 15:19:44
 * @LastEditors  : lyj
 * @LastEditTime : 2020-01-16 15:20:00
 -->
<template>
  <div class="yn_page">
    <!--<tabs class="tab" :tabList="tabList"></tabs>-->
    <!--<router-view></router-view>-->
    <el-tabs
      v-model="activeName"
      class="tabs yn_page"
      @tab-click="handleClick"
    >
      <el-tab-pane
        lazy
        label="我的申请"
        name="check_process"
      >
        <check-process v-if="activeName == 'check_process'" />
      </el-tab-pane>
      <el-tab-pane
        lazy
        label="我的待办"
        name="before_process"
      >
        <before-process v-if="activeName == 'before_process'" />
      </el-tab-pane>
      <el-tab-pane
        lazy
        label="我的已办"
        name="after_process"
      >
        <after-process v-if="activeName == 'after_process'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import checkProcess from './check_process'
import beforeProcess from './before_process'
import afterProcess from './after_process'
export default {
  components: {
    checkProcess,
    beforeProcess,
    afterProcess
  },
  data() {
    return {
      activeName:'check_process',
      tabList: [
        { label: '我提交的流程', name: 'check_process' },
        { label: '待我审核流程', name: 'before_process' },
        { label: '我已审核流程', name: 'after_process' },
      ]
    }
  },
  methods:{
    handleClick(){

    }
  }
}
</script>
<style lang="less" scoped>
  .tabs {
    padding: 10px;
    width: 100%;
    /deep/.el-tabs__item {
      font-size: 16px;
      color: #333333;
    }
    /deep/ .is-active {
      font-weight: bold;
    }
    /deep/.el-tabs__active-bar {
      width: 110px !important;
      height: 4px;
      background-color: #0e3d9c;
    }
  }
  .main_page{
    height: 100%;
  }
</style>
